<template>
  <div class="wrapper">
    <div class="parent">
      <h1>我是父组件</h1>
      <p>当前计数: {{ count }}</p>
      <button @click="incrementCount">父组件增加计数</button>
      <ChildComponent :count="count"/>

    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './childCase.vue';

const count = ref(0);

const incrementCount = () => {
  count.value += 1;
};
</script>

<style>
.wrapper {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.parent {
  margin-bottom: 20px;
  border: 1px solid rgb(54, 52, 52);
  padding: 20px;
  width: 300px;
}

button {
  margin-top: 10px;
}
</style>
